<template>
  <div class="icons">
    <swiper>
        <swiper-slide v-for="(page,index1) of pages" :key="index1">
    <div class="icon " v-for="(item,index) of page" :key="item.id" v-if="index<8">
      <div class="icon-img">
      <img class="icon-img-content" :src="item.imgUrl" alt="">
      </div>
      <p>{{item.desc}}</p>
    </div>
        </swiper-slide>
        </swiper>
  </div>
</template>
<script>
export default {
  name: "homeIcons",
  props:{
    iconList:Array
  },
  data() {
    return {
    };
  },
  computed: {
    /**
     *重点 数组处理  处理成2维数组
     *
     *当数据有8条以上的话， 就放入新的数组中。 Math.floor向下取整。把得到的值 当做页数。
     *然后把对应的8条数据的内容，放到对应的页数数组。当做数据
    */
    pages() {
      let  pages = [];
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
/*
  因为icons高度设置了为0 所以icon的高度不能设置为50%。不起效果的，
  然后icon的宽高比例是1比1  所以都是25。  或者说 icon是icons高度的一半。padding-bottom:50
  所以Icon的高度是padding-bottom :25%;
  .icons >>> .swiper-container 因为swiper-slide包住的Icon 高度只是一排的25%； 但是当icon底部都还有的话， 就不能拉滑了。 所以要给
  轮播的container和icons一样的高度。 Height 0 padding-bottom 50%
        white-space nowrap
      overflow hidden
      text-overflow ellipsis 当文字长 变...
*/
.icons >>> .swiper-container {
  height: 0;
  padding-bottom: 50%;
}

.icons {
    margin-top .1rem;

  .icon {
    position: relative;
    overflow: hidden;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    float: left;

    .icon-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      margin: 0 auto;
      bottom: 0.44rem;
      box-sizing: border-box;
      padding: 0.1rem;
    }

    .icon-img-content {
      display: block;
      margin: 0 auto;
      height: 100%;
    }

    p {
      position: absolute;
      height: 0.44rem;
      line-height: 0.44rem;
      bottom: 0;
      width: 100%;
      color: #333;
      text-align: center;
      ellipsis()
    }
  }
}
</style>

